<template>
  <base-modal 
    :title="$t('common.form.preview.qualityField.title4')" width="520px" class="form-select-setting-modal"
    :show.sync="ruleModalShow" :mask-closeable="false">
    <div class="form-select-setting-batch">
      <div v-for="(item, index) in list" :key="index" class="quality-rule-wrap">
        <el-select v-model="selectFieldNameArray[index]" :placeholder="$t('common.placeholder.select')" @change="handlerChange(index)" @focus="handlerFilterFields">
          <el-option
            v-for="item in (newFields || fields)"
            :key="item.fieldName"
            :label="item.displayName"
            :value="item.fieldName">
          </el-option>
        </el-select>
        <template v-if="selectFieldNameArray[index]">
          <div class="equal">=</div>
          <form-builder mode="qualitySetting" :fields="fieldsArray[index]" class="edit-quality-rule" ref="form" :value="formValue" @update="update"></form-builder>
        </template>
        <i class="iconfont icon-shanchu1 task-pointer task-ml15 task-icon" @click="delField(index)"></i>
      </div>
      <div class="task-font14 task-c13 task-inquire-add task-pointer addBtn" @click="addField">{{$t('common.base.add2')}}</div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="ruleModalShow = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="ruleEdit">{{$t('common.base.save')}}</el-button>
    </div>
  </base-modal>
</template>
<script>
/* utils */
import _ from 'lodash';

export default {
  name: 'quality-rule-dialog',
  props: {
    config: {
      type: Array
    },
    form: {
      type: Object
    }
  },
  data() {
    return {
      list: [1],
      formValue: {},
      selectFieldNameArray: [],
      fieldsArray: [],
      ruleModalShow: false,
      newFields: this.fields
    };
  },
  watch: {
    form: {
      immediate: true,
      deep: true,
      handler(newValue, _) {
        this.selectFieldNameArray = [];
        this.formValue = {};
        Object.assign(this.formValue, this.form)
        let length = Object.keys(this.form).length;
        if (length !== 0) {
          this.selectFieldNameArray = Object.keys(this.form) || []
          this.selectFieldNameArray.forEach((item, index) => {
            this.fieldsArray[index] = this.fields.filter(subItem => subItem.fieldName === item); 
          })
        } else {
          length = 1;
        }
        this.list = new Array(length).fill(1);
      }
    }
  },
  computed: {
    fields() {
      return this.config
    },
  },
  methods: {
    handlerChange(index) {
      this.fieldsArray[index] = this.fields.filter(item => item.fieldName === this.selectFieldNameArray[index]);
      // if (Object.keys(this.formValue).length < this.list.length) {
      //   let field = this.fieldsArray[index][0].fieldName;
      //   if (!this.form[field]) {
      //     this.$set(this.formValue, field, null);
      //   }
      // }
    },
    handlerFilterFields() {
      this.newFields = this.fields.filter(item => !this.selectFieldNameArray.includes(item.fieldName))
    },
    addField() {
      this.list.push(1);
    },
    delField(index) {
      this.list.pop()
      this.$delete(this.formValue, this.selectFieldNameArray[index])
      this.selectFieldNameArray = this.selectFieldNameArray.filter((_, i) => i !== index)
      this.selectFieldNameArray.forEach((item, index) => {
        this.fieldsArray[index] = this.fields.filter(subItem => subItem.fieldName === item); 
      })

      if (this.list.length === 0) {
        this.list.push(1);
        Object.assign(this.formValue, {})
      }
    },
    update({field, newValue, _}) {
      let { fieldName } = field;
      this.$set(this.formValue, fieldName, newValue)
      this.updateForm();
    },
    ruleEdit() {
      this.ruleModalShow = false
      this.$emit('input', this.formValue)
      this.$emit('submit')
    },
    // 更新formbuilder组件（日期、人员等）
    updateForm() {
      const temp = this.selectFieldNameArray;
      this.selectFieldNameArray = Object.keys(this.formValue) || []
      this.selectFieldNameArray.forEach((item, index) => {
        this.fieldsArray[index] = this.fields.filter(subItem => subItem.fieldName === item); 
      })
      this.selectFieldNameArray = temp;
      this.selectFieldNameArray.forEach((item, index) => {
        this.fieldsArray[index] = this.fields.filter(subItem => subItem.fieldName === item); 
      })
    }
  },
};
</script>


<style lang="scss">
.quality-rule-wrap {
  display: flex;
  align-items: center;
  .equal {
    margin: 0 20px;
  }
  .form-builder {
    padding: 0 !important;
    line-height: 38px;
  }
  .edit-quality-rule {
    label {
      display: none !important;
    }
    .form-item {
      width: 180px;
    }
    .form-item-control {
      width: 180px;
      flex: inherit;
      .err-msg-wrap {
        min-height: 0 !important;
        padding-bottom: 0 !important;
      }
    }
  }
  .addBtn {
    margin-left: 10px;
  }
}

</style>
